import './App.css';
import React from 'react';
import Toolbar from "./Toolbar";
import { Button, Modal, Result, WingBlank, WhiteSpace, Toast, Icon, Grid } from 'antd-mobile';
import * as request from './request';
import { connect } from 'react-redux';
import ico_fav from './static/ico_fav.svg';
import ico_order from './static/ico_order.svg';
import ico_baobao from './static/ico_baobao.svg';
import ico_setting from './static/ico_setting.svg';
import ico_avatar from './static/ico_avatar.svg';
import ico_quxian from './static/ico_quxian.svg';
import ico_exist from './static/ico_exist.svg';
import ico_notice from './static/ico_notice.svg';
import ico_book from './static/ico_book.svg';
import ico_nan from './static/ico_nan.svg';
import ico_nv from './static/ico_nv.svg';

const alert = Modal.alert;
const apiURL = "/api/services/app/Members/Get?id=";
const Avatar = src => src ? <img src={src} className="spe am-icon am-icon-md" alt="" /> : <img src={ico_avatar} className="spe am-icon am-icon-md" alt="" />;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
                id: 0,
                avatar: ico_avatar
            },
        }
    }
    componentDidMount() {
        if (this.props.currentUser) {
            this.setState({ data: this.props.currentUser });
        }
        else{
            this.fetchData();
        }
    }
    fetchData = () => {
        Toast.loading('Loading...', 0);
        let mid = localStorage.getItem('memberId');
        if (mid) {
            request.get(apiURL + mid)
                .then((data) => {
                    this.setState({ data: data.result });
                    Toast.hide();
                    this.props.dispatch({
                        type: "setCurrUser",
                        data: data.result,
                    })
                })
                .catch((error) => {
                    console.log('fetch data failed', error);
                });
        }
        else {
            Toast.info('请先登录~');
        }
    }
    logout = () => {
        alert('注销', '确定退出当前账号?', [
            { text: '取消', onPress: () => console.log('cancel') },
            {
                text: '确定', onPress: () => {
                    this.props.dispatch({
                        type: "setCurrUser",
                        data: null,
                    })
                    localStorage.removeItem("memberId");
                    localStorage.removeItem("childid");
                    localStorage.removeItem("accessToken");
                    this.props.history.push('/Login');
                }
            },
        ])

    }
    goto = (item) => {
        if (item.url === 'logout') {
            this.logout();
        }
        else {
            this.props.history.push(item.url);
        }
    }
    render() {
        const { data } = this.state;
        const menus = [
            {
                icon: ico_baobao,
                text: '我的宝宝',
                url: '/Child/'
            },
            // {
            //     icon: ico_book,
            //     text: '我的课程',
            //     url: '/MyCourse/'
            // },
            // {
            //     icon: ico_fav,
            //     text: '收藏',
            //     url: '/MyFav/'
            // },
            // {
            //     icon: ico_order,
            //     text: '订单',
            //     url: '/MyOrder/'
            // },
            {
                icon: ico_quxian,
                text: '儿童评测',
                url: '/BabyRadar/'
            },
            {
                icon: ico_setting,
                text: '个人设置',
                url: '/MyInfo/'
            },
            // {
            //     icon: ico_notice,
            //     text: '通知消息',
            //     url: '/MyMsg/'
            // },
            {
                icon: ico_exist,
                text: '注销',
                url: 'logout'
            },
        ]
        return (
            <div>
                <Result className="result-my"
                    img={Avatar(data.id === 0 ? data.avatar : request.imgServer + data.avatar)}
                    title={data.loginName}
                    message={<div>{data.role} <img src={data.sex === '男' ? ico_nan : ico_nv} style={{width:16,height:16}} alt={data.sex} /> {data.ethnicity} {data.city} </div>}
                />
                <Grid data={menus} columnNum={4} hasLine={false} onClick={(item) => this.goto(item)} />
                        <WhiteSpace />
                        <WingBlank>
                            <Button type="warning" onClick={() => this.logout()}>注销</Button>
                        </WingBlank>
                        <Toolbar history={this.props.history} selectedTab='My' />
                    </div>
        )
    };
}

export default connect(
    state => ({ currentUser: state.setCurrentUser })
)(App)
